<template>
    <div class="table_container">
        <div class="title">浏览数据</div>
        <div class="table_main">
            <div class="search_box">
                <div class="search_left">
                    客户搜索
                    <el-input
                        v-model="formData.cust_keyword"
                        :prefix-icon="Search"
                        size="small"
                        placeholder="请输入客户名称进行查找"
                        class="search_input"
                        @input="onSearch" />
                </div>
                <el-button :disabled="!tableData.length" @click="onExport">导出</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="客户" min-width="160">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-image
                                :preview-src-list="[scope.row.cust_info?.avatar]"
                                :preview-teleported="true"
                                :src="scope.row.cust_info?.avatar"
                                fit="cover"
                                class="avatar">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon>
                                            <icon-picture />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <div style="margin-left: 10px">{{ scope.row.cust_info?.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="设备" prop="device" min-width="120" />

                <el-table-column label="渠道" min-width="180">
                    <template #default="scope">
                        {{ scope.row.channel }}
                    </template>
                </el-table-column>

                <el-table-column label="浏览时间" prop="start_time" min-width="180" />
                <el-table-column label="浏览时长" min-width="100">
                    <template #default="scope">
                        {{ !isExternalLink ? SFormat(scope.row.length) : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="分享员工" prop="work_user_info.name" min-width="120">
                    <template #default="scope">
                        {{ scope.row.work_user_info ? scope.row.work_user_info.name : '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="分享客户" prop="share_cust_info.name" min-width="120">
                    <template #default="scope">
                        {{
                            !isExternalLink ? (scope.row.share_cust_info ? scope.row.share_cust_info.name : '--') : '--'
                        }}
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="none_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div>暂无数据</div>
                    </div>
                </template>
            </el-table>
            <ZWPagination @submit="onPage"></ZWPagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { useStore } from '@/store';
import { SFormat } from '@/utils/utils';
import { Search } from '@element-plus/icons-vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { duration } from 'moment';
import ZWPagination from '@/components/ZWPagination.vue';
const emit = defineEmits(['submit', 'TableExport']);
const store = useStore();
const formData = ref({
    cust_keyword: '',
    page: 1,
    page_size: 15
});
const tableData = ref([]);

const props = withDefaults(
    defineProps<{
        isExternalLink: boolean;
    }>(),
    {
        isExternalLink: false
    }
);

const onSearch = () => {
    if (window.timeout) clearTimeout(window.timeout);
    window.timeout = setTimeout(() => {
        emit('submit', formData.value);
    }, 600);
};
// 分页
const onPage = (v: any) => {
    formData.value = { ...formData.value, ...v };
    emit('submit', formData.value);
};
// 处理表格数据
const onTableData = (v: any) => {
    tableData.value = v.data.map((item: any) => {
        const { channel_type, channel_name } = item;
        item['channel'] =
            channel_type == 1 ? `公众号（${channel_name}）` : channel_type == 2 ? `小程序（${channel_name}）` : '--';
        return item;
    });
    store.dispatch('pageTotal', v.total);
};
// 导出
const onExport = () => {
    emit('TableExport', formData.value);
};
defineExpose({
    onTableData
});
</script>
<style scoped lang="scss">
.table_container {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eaeaea;

    .table_main {
        padding: 0 24px 24px;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 0 24px;
        height: 56px;
        border-bottom: 1px solid #eaeaea;
    }

    .search_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;

        .search_left {
            font-size: 14px;
            font-weight: 300;
            color: #33302d;
        }

        .search_input {
            width: 280px;
            height: 36px;
            margin-left: 5px;
        }
    }

    :deep .el-table__body tr,
    .el-table__body td {
        padding: 0;
        height: 70px;
        line-height: 30px;
    }

    .avatar {
        width: 24px;
        height: 24px;
        font-size: 22px;
        border-radius: 50%;

        // background: #ff6b00;
    }
}

.none_data {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;

    img {
        padding-top: 30px;
        transform: translateX(15%);
    }
}
</style>
<style lang="scss">
.el-table {
    .el-table__header-wrapper,
    .el-table__fixed,
    .el-table__fixed-right {
        .el-table__header {
            thead {
                tr {
                    th {
                        background-color: #f9f9f9;
                    }
                }
            }
        }
    }
}
</style>
